<template>
  <div>
    <echarts-view :options="option" height="400px" theme="walden"></echarts-view>
  </div>
</template>

<script>
import echartsView from '@/components/ECharts'
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    echartsView
  },
  data () {
    return {
      option: {
        textStyle: {
          color: '#333'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.propsData.Legend.split(',')
        },
        grid: {
          left: '10px',
          right: '0',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: false,
          data: this.propsData.X_ZB.split(','),
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: this.propsData.SJJH[0].TITLE,
            type: 'line',
            data: this.propsData.SJJH[0].VALUEDATA.split(',')
          },
          {
            name: this.propsData.SJJH[1].TITLE,
            type: 'bar',
            barCategoryGap: '70%',
            data: this.propsData.SJJH[1].VALUEDATA.split(',')
          }
          // {
          //   name: this.propsData.SJJH[2].TITLE,
          //   type: 'bar',
          //   data: this.propsData.SJJH[2].VALUEDATA.split(',')
          // },
          // {
          //   name: this.propsData.SJJH[3].TITLE,
          //   type: 'line',
          //   data: this.propsData.SJJH[3].VALUEDATA.split(',')
          // },
          // {
          //   name: this.propsData.SJJH[4].TITLE,
          //   type: 'line',
          //   data: this.propsData.SJJH[4].VALUEDATA.split(',')
          // }
        ]
      }
    }
  }
}
</script>
